.index {
	// 主体
	.main {
		// 排名+打卡
		.main1 {
			margin: 15px;
			display: flex;
			height: 150px;
			color: #004e73;
			.rank {
				position: relative;
				padding: 15px;
				margin-right: 15px;
				width: 1px;
				flex-grow: 1.5;
				border-radius: 15px;
				background: url(../../assets/images/index-card-rank.png) no-repeat
					center left;
				background-size: 80%;
				background-color: #54afda;

				#rankNum {
					position: absolute;
					right: 15px;
					bottom: 15px;
					font-size: 40px;
					color: #fff;
				}
			}

			.clockin {
				position: relative;
				padding: 15px;
				width: 1px;
				flex-grow: 2.5;
				border-radius: 15px;
				background: url(../../assets/images/index-card-sum.png) no-repeat center
					left;
				background-size: 50%;
				background-color: #9fd9f8;

				#clockinBtn {
					position: absolute;
					right: 15px;
					bottom: 15px;
					padding: 8px;
					font-size: 12px;
					font-weight: bold;
					color: #004e73;
					border-radius: 20px;
					background-color: #0a0;
				}
			}
		}

		// 运动数据+徽章
		.main2 {
			margin: 15px;
			display: flex;
			height: 110px;

			.sport {
				padding: 15px;
				width: 1px;
				flex-grow: 1;
				margin-right: 15px;
				color: #fff;
				border-radius: 15px;
				background: url(../../assets/images/index-card-data.png) no-repeat
					center center;
				background-size: cover;
			}

			.badge {
				position: relative;
				padding: 15px;
				width: 1px;
				flex-grow: 1;
				color: #004e73;
				border-radius: 15px;
				background: url(../../assets/images/index-card-badge.png) no-repeat
					center left;
				background-size: 50%;
				background-color: #9dbde3;
				span {
					position: absolute;
					right: 15px;
					bottom: 15px;

					#badgeNum {
						font-size: 60px;
					}
				}
			}
		}

		//课程训练
		.main3 {
			margin: 15px;
			padding: 15px;
			height: 110px;
			border-radius: 15px;
			color: #fff;
			background: url(../../assets/images/course-img04.jpg) no-repeat center
				center;
			background-size: cover;
		}

		// 户外跑步
		.main4 {
			padding: 15px;
			margin: 15px;
			height: 110px;
			color: #fff;
			border-radius: 15px;
			background: url(../../assets/images/course-img02.png) no-repeat center
				center/cover;
		}
	}

	// 轮播图
	.swiper {
		height: 200px;
		background-color: #4294ff;

		.slide1 {
			background: url("../../assets/images/course-img03.jpg") no-repeat center
				center/cover;
		}

		.slide2 {
			background: url("../../assets/images/course-img04.jpg") no-repeat center
				center/cover;
		}

		.slide3 {
			background: url("../../assets/images/course-img05.jpg") no-repeat center
				center/cover;
		}
	}
}
